<template>
	<div class="zh-transcoding-information">
		<nav-header></nav-header>
		<div class="zh-table">
			<div class="zh-table-open clear">
				<div class="zh-open-right fr">
				</div>
			</div>
			<div class="zh-table-contents"
				v-loading="loading.status"
				:element-loading-text="loading.txt">
				<el-table
				    :data="listData"
				    border
				    max-height="600"
				    style="width: 100%">
				    <el-table-column
				      type="index"
                      :index="typeIndex"
				      label="序号"
				      align="center"
				      show-overflow-tooltip
				      width="50"
				      >
				    </el-table-column>
				    <el-table-column
				      prop="name"
				      label="视频名"
				      align="center"
				      show-overflow-tooltip
				      >
				    </el-table-column>
						<el-table-column
							v-if="$store.state.checkLevel && isTopAppcode"
				      prop="platform_name"
				      label="组织架构"
				      align="center"
				      show-overflow-tooltip
				      >
				    </el-table-column>
				    <el-table-column
				      prop="_transform_type"
				      label="转码类型"
				      align="center"
				      show-overflow-tooltip
				      >
				    </el-table-column>
				    <el-table-column
				      prop=""
				      label="状态"
				      align="center"
				      show-overflow-tooltip
				      >
				      	<template slot-scope="scope">
				      		<span v-html="getStatustTxt(scope.row.status)" :style="getStatustColor(scope.row.status)"></span>
				      	</template>
				    </el-table-column>
				    <el-table-column
				      prop="start_time"
				      label="开始时间"
				      align="center"
				      show-overflow-tooltip
				      >
				    </el-table-column>
				    <el-table-column
				      prop="end_time"
				      label="结束时间"
				      align="center"
				      show-overflow-tooltip
				      >
				    </el-table-column>
				    <el-table-column
				      prop="5"
				      label="操作"
				      align="center"
				      show-overflow-tooltip
				      >
				      	<template slot-scope="scope">
				      		<template v-if="parseInt(scope.row.status) === 1">
				      			<el-button @click="deleteTransorm(scope.row)" type="text">删除记录</el-button>
				      		</template>
				      		<template v-if="parseInt(scope.row.status) === 2 && parseInt(scope.row.is_immediately) !== 1">
				      			<el-button @click="startTransorm(scope.row)" type="text">立即开始转码</el-button>
				      		</template>
				      		<template v-if="parseInt(scope.row.status) === 4">
				      			<el-button @click="restartTransorm(scope.row)" type="text">重新转码</el-button>
				      		</template>
			      			
			      			
			      			
			      	    </template>
				    </el-table-column>
				</el-table>
				<div class="table-pagination" v-if="total_number > 10">
					<el-pagination
					    @size-change="handleSizeChange"
					    @current-change="handleCurrentChange"
					    :current-page="listParam.page_index"
					    :page-sizes="[10, 20, 30, 40, 50, 100]"
					    :page-size="listParam.page_size"
					    layout="total, sizes, prev, pager, next, jumper"
					    :total="total_number">
					</el-pagination>
					<div class="pagination-button">
						<el-button 
							@click="getList"
							type="primary" icon="el-icon-refresh" 
							circle title="刷新数据" size="mini" >
						</el-button>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>
<script>
  	export default {
	    data() {
		    return {
					isTopAppcode: sessionStorage.getItem('CheckSchoolAppCode') === '00000000000000000000000000000000',
		    	loading:{
					status:false,
					txt:'获取数据...',
				},
		    	listData:[],
		    	listParam:{
		       		page_index:1,
		       		page_size:10,
		        },
		        selected:[],
                total_number:0,
                getListTimeout: null,
		      	cutType:{0:'物理切片',1:'虚拟切片'},
		      	isMirco:{0:'否',1:'是'},
		      //	1：转码成功；2：待转码 3：转码中 4：转码失败
		      	status_arr:{1:{txt:'转码成功',color:'green'},2:{txt:'等待转码',color:'rgb(255, 153, 0)'},3:{txt:'转码中',color:'blue'},4:{txt:'转码失败',color:'red'}}
		    }
		},
		created(){
			this.getList();
			this.getListTimeoutFnc()
		},
		methods: {
			// 序号
            typeIndex(index) {
                return index + (this.listParam.page_index - 1) * this.listParam.page_size + 1;
            },
			//定时器
			getListTimeoutFnc(){
				this.getListTimeout = setInterval(() => {
					this.getList();
	            }, 20000)
			},
			deleteTransorm(obj){
				let yes = ( data => {
					let success = ( data=>{
                        this.$message.success(data.msg);
                        clearInterval(this.getListTimeout);
                        this.getListTimeout = null;

                        if (this.listData.length == 1) {
                            this.listParam.page_index--;
                        }
                        
                        this.getList();
                        this.getListTimeoutFnc();
	            	})
					this.$ajax.delete('api/video/transform',{params:{id:obj.id},func:{success:success}})
				})
				let cancel = ( data => {})
				this.e_confirm({yes:yes,cancel:cancel,txt:'确定将 '+obj.name+' 删除吗？'});
				
			},
			restartTransorm(obj){
				let yes = ( data => {
					let success = ( data=>{
	            		this.$message.success(data.msg);
	            		this.getList();
	            	})
					this.$ajax.put('api/video/restart_video_transform',{id:obj.id},{func:{success:success}})
				})
				let cancel = ( data => {})
				this.e_confirm({yes:yes,cancel:cancel,txt:'确定将 '+obj.name+' 重新转码吗？'});
				
			},
			startTransorm(obj){
				let yes = ( data => {
					let success = ( data=>{
	            		this.$message.success(data.msg);
	            		this.getList();
	            	})
					this.$ajax.put('api/video/start_video_transform',{id:obj.id},{func:{success:success}})
				})
				let cancel = ( data => {})
				this.e_confirm({yes:yes,cancel:cancel,txt:'确定将 '+obj.name+' 立即开始转码吗？'});
				
			},
			getStatustTxt(val){
				return this.status_arr[parseInt(val)].txt;
			},

			getStatustColor(val){
				return 'color:'+this.status_arr[parseInt(val)].color;
			},
			getList(){
				this.loading.status = true;
            	let success = (data=>{
            		this.loading.status = false;
            		this.listData = data.data.data;
            		this.total_number = data.data.data_sum;
            	})
            	let fail = ( data => {
            		this.loading.status = false
            		this.$message.error(data.msg)
            	})
            	//执行请求，并将回调方法变成config成员以便鉴权过期可以执行
            	this.$ajax.get('api/video/video_transform_list',{params: this.listParam,func:{success:success,fail:fail}})
            },
            //选中
		    tableSelectionChange(val) {
                this.selected = val;
            },
		    handleSizeChange(val) {
		    	this.listParam.page_index = 1;
		    	this.listParam.page_size = val;
		    	this.getList()
		    },
		    handleCurrentChange(val) {
		    	this.listParam.page_index = val;
		    	this.getList();
		    },
		    changeVideo(id){
		    	let success = ( data => {
		    		this.$message.success(data.msg)
					this.getList();
				});
		    	this.$ajax.delete('api/video/video_cut',{params:{id:id},func:{success:success}})
		    },
		    deleteVideo_confirm(obj){
				let yes = ( data => {
					this.changeVideo(obj.cut_id);
				})
				let cancel = ( data => {})
				this.e_confirm({yes:yes,cancel:cancel,txt:'确定将 '+obj.video_name+' 删除吗？'});

			},
		},
		//离开页面之前
		beforeRouteLeave (to, from, next) {
            clearInterval(this.getListTimeout);
            this.getListTimeout = null;
		    next(true)
		},
		beforeDestroy (){
            clearInterval(this.getListTimeout);
            this.getListTimeout = null;
		}
  	}
</script>
<style lang="scss">
	.zh-transcoding-information {
		.el-table__body-wrapper table tbody {
			td:nth-child(7) {
				padding: 0;
			}
		}

        .zh-table-contents {
            margin-top: 0;
        }
	}
</style>